<template>
    <div class="login-container">
        <el-form ref="form" :model="form" label-width="80px" class="login-form">
            <h2 class="login-title">欢迎登录供应商系统</h2>
            <i class="el-icon-user-solid"></i>
            <el-form-item label="用户名" icon="el-icon-user-solid">
                <el-input v-model="loginUserName"></el-input>
            </el-form-item>
            <i class="el-icon-key" style=""></i>
            <el-form-item label="密码" icon="el-icon-key">
                <el-input v-model="passWord"></el-input>
            </el-form-item>
            <el-form-item label="验证码" icon="el-icon-key">
                <el-input v-model="passCode"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit" class="loginButton">登录</el-button>
            </el-form-item>
            <el-form-item>
                <el-link type="primary" style="float: right;margin-left: 10px" :underline="true" @click="register">注册</el-link>
            </el-form-item>
        </el-form>
        <el-dialog
                :title="title"
                :visible.sync="show"
                width="80%"
                center>
            <el-form ref="form" label-width="80px">
                <el-form-item label="用户名" :rules="rules">
                    <el-input v-model="userName"></el-input>
                </el-form-item>
                <el-form-item label="密码" :rules="rules">
                    <el-input v-model="passWord"></el-input>
                </el-form-item>
                <el-form-item label="手机号" :rules="rules">
                    <el-input v-model="userTel"></el-input>
                </el-form-item>
                <el-form-item label="验证码" icon="el-icon-key">
                    <el-input v-model="passCode"></el-input>
                </el-form-item>
                <el-form-item label="头像">
                    <el-upload
                            class="avatar-uploader"
                            action="apf/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="close">取消</el-button>
            <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="registerConfirm">注册</el-button>

        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "login",
        data(){
           return{
               userTel:'',
               sex:'',
               loginUserName:'',
               title:'注册用户',
               userName:'',
               passWord:'',
               birthDate:'',
               userPhoneNum:'',
               show:false,
               radio:'1',
               role: '',
               education:'',
               dept:'',
               imageUrl: '',
               HeaderImg:'',
               passCode:'',
               form:{
                   username: "",
                   password: ""
               },
               rules: {
                   userName: [
                            {required: true, message: "用户名不能为空", trigger: 'blur'},
                            {min: 3, max: 10, message: "用户名3-5位", trigger: 'blur'}
                           ],
                   userPhoneNum: [
                            {required: true, message: "电话不能为空", trigger: 'blur'},
                             {min: 11, max: 11, message: "请输入11位电话号码", trigger: 'blur'}
                           ]
                  }
           }
        },
        methods:{
            onSubmit() {
                console.log(this.loginUserName+"/"+this.passWord)
                if (this.loginUserName == '') {
                    this.$message({
                        message: '用户名必填',
                        type: 'warning'
                    });
                    return
                }
                if (this.passWord == '') {
                    this.$message({
                        message: '密码必填',
                        type: 'warning'
                    });
                    return
                }
                if (this.passCode == '') {
                    this.$message({
                        message: '验证码必填',
                        type: 'warning'
                    });
                    return
                }
                this.$axios.get("api/login/"+this.loginUserName+"/"+this.passWord).then(
                    r=>{
                        if (r.data!=''){
                            if (r.data.status==200){
                                let userStr= JSON.stringify(r.data)  //把json对象转换为String
                                sessionStorage.setItem("user",userStr)
                                this.$message.success("登录成功")
                                console.log(r.data.userName)
                                this.$store.state.userName=r.data.userName
                                this.$router.push("NavMenu")
                            }else{
                                this.$message.warning("登录失败")
                            }
                        }

                    }
                    )
            },
            register(){
              this.show=true
            },
            registerConfirm(){
                if (this.userName == '') {
                    this.$message({
                        message: '用户名必填',
                        type: 'warning'
                    });
                    return
                }
                if (this.passWord == '') {
                    this.$message({
                        message: '密码必填',
                        type: 'warning'
                    });
                    return
                }
                if (this.passCode == '') {
                    this.$message({
                        message: '验证码必填',
                        type: 'warning'
                    });
                    return
                }
                let fd = new FormData()
                fd.append("userName", this.userName)
                fd.append("passWord", this.passWord)
                fd.append("passCode", this.passCode)
                this.$axios.post("api/register",fd).then(
                    r => {
                        if (r.data == 200) {
                            this.$message({
                                message: '注册成功',
                                type: 'success'
                            });
                            this.userName = ''
                            this.show=false
                        } else {
                            this.$message({
                                message: '注册失败',
                                type: 'error'
                            });
                        }
                    }
                )
            },
            close(){
                this.show = false
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.headerImg=res
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 5;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style scoped>
    .login-form {
        width: 350px;
        margin: 300px auto; /* 上下间距160px，左右自动居中*/
        background-color: rgb(255, 255, 255); /* 透明背景色 */
        padding: 30px;
        border-radius: 20px; /* 圆角 */
    }

    /* 背景 */
    .login-container {
        position: absolute;
        width: 100%;
        height: 115%;
        background: url("../img/login1.jpg");
    }

    /* 标题 */
    .login-title {
        color: #303133;
        text-align: center;
    }
    .loginButton{
        align:center;
        width: 270px;
    }
</style>